<template>
    <div class="app-container teacher-index-container">
      <!-- 搜索区域 -->
      <div v-show="type == 0 || type == 2">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="师资姓名" prop="name">
            <el-input v-model="queryParams.name" placeholder="请输入师资姓名" clearable size="small"  style="width: 200rem;"/>
          </el-form-item>
          <el-form-item label="师资分类" prop="teacherClassification">
            <el-select v-model="queryParams.teacherClassification" placeholder="请选择师资分类" clearable size="small" style="width: 200rem;">
              <el-option
                v-for="dict in teacherTypes"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
           <!-- 添加专业名称搜索 -->
  <el-form-item label="专业名称" prop="majorName">
    <el-input v-model="queryParams.majorName" placeholder="请输入专业名称" clearable size="small"  style="width: 200rem;"/>
  </el-form-item>
  <!-- 添加专业领域搜索 -->
  <el-form-item label="专业领域" prop="professionalField">
    <el-input v-model="queryParams.professionalField" placeholder="请输入专业领域" clearable size="small"  style="width: 200rem;"/>
  </el-form-item>
          <!--        <el-form-item label="状态" prop="status">-->
          <!--          <el-select v-model="queryParams.status" placeholder="请选择状态" clearable size="small">-->
          <!--            <el-option label="正常" value="0" />-->
          <!--            <el-option label="停用" value="1" />-->
          <!--          </el-select>-->
          <!--        </el-form-item>-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
          <el-row>
            <el-col :span="24">
<!--              <el-form-item-->
<!--                size="mini"-->
<!--                label="师资分类"-->
<!--                prop="teacherClassification"-->
<!--              >-->
<!--                <div class="teacher-type-tags">-->
<!--                  <span-->
<!--                    v-for="type in teacherTypes"-->
<!--                    :key="type.value"-->
<!--                    :class="{-->
<!--                      'type-tag': true,-->
<!--                      'active': queryParams.teachrClassification === type.value-->
<!--                    }"-->
<!--                    @click="handleTypeSelectTeachar(type.value)"-->
<!--                  >-->
<!--                    {{ type.label }}-->
<!--                  </span>-->
<!--                </div>-->
<!--              </el-form-item>-->
              <el-form-item
                size="mini"
                label="师资类型"
                prop="teacherType"
              >
                <div class="manager-tags">
      <span
        v-for="manager in managerList"
        :key="manager.teacherType"
        :class="['manager-tag', queryParams.teacherType === manager.dictValue ? 'active' : '']"
        @click="handleManagerSelect(manager)"
      >
        {{ manager.dictLabel }}
      </span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>


        <!-- 操作按钮区域 -->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-col>
          <!--        <el-col :span="1.5">-->
          <!--          <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改</el-button>-->
          <!--        </el-col>-->
          <!--        <el-col :span="1.5">-->
          <!--          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>-->
          <!--        </el-col>-->
          <!--        <el-col :span="1.5">-->
          <!--          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>-->
          <!--        </el-col>-->
          <!--        <el-col :span="1.5">-->
          <!--          <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>-->
          <!--        </el-col>-->
        </el-row>
        <div style="width: 100%;height: 90vh;overflow:auto; margin-bottom: 30%;padding-bottom: 18%;position: relative;">
        <!-- 数据表格 -->
        <el-table    height="500" :cell-style="{ padding: '0px' }"  :row-style="{ height: '30px' }" border highlight-current-row  v-loading="loading" :data="teacherList" >
          <el-table-column label="序" align="center" type="index" :index="indexMethod" width="35"/>
          <el-table-column label="创建时间" align="center" prop="createTime" width="85">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,'{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="createBy" width="60" :show-overflow-tooltip="true"/>
          <el-table-column label="师资姓名" align="center" prop="name" width="80"/>
          <el-table-column label="师资类型" align="center" prop="teacherType" width="100">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.teacher_type" :value="scope.row.teacherType"/>
            </template>
          </el-table-column>
          <el-table-column label="联系方式" align="center" prop="phone" width="100"/>
          <el-table-column label="专业领域" align="center" prop="professionalField" :show-overflow-tooltip="true" width="190"/>
          <el-table-column label="职称" align="center" prop="professionalTitle" width="240"/>
          <el-table-column label="专业名称" align="center" prop="majorName" :show-overflow-tooltip="true" width="100"/>
          <el-table-column label="签约时间" align="center" prop="signTime" width="110">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.signTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="到期时间" align="center" prop="expireTime" width="110">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.expireTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="服务量" align="center" prop="serviceCount"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="85" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"  title="修改"></el-button>
<!--              <el-button size="mini" type="text" icon="el-icon-view" @click="handleDetail(scope.row)"></el-button>-->
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" title="删除"></el-button>
              <el-button size="mini" type="text" icon="el-icon-s-custom" @click="handleSnap(scope.row)" title="快照"></el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        </div>
      </div>

      <!-- 编辑界面 -->
      <teacher-form
        v-if="type === 1"
        :teacher-info="currentTeacher"
        :type.sync="type"
        :typeSelect="typeSelect"
        @refresh="getList"
        :show="show"

      />

      <!-- 导入对话框 -->
      <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
        <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :headers="upload.headers"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip text-center" slot="tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          </div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </el-dialog>

      <!-- 添加快照对话框 -->
      <el-dialog
        title="快照"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="closeSnapShot">
        <snapshot :teacherId="teacherId" v-if="dialogVisible"></snapshot>
      </el-dialog>
    </div>
  </template>


  <script>
  import {getDicts} from "@/api/system/dict/data";
  import {
    listTeacherInfo,
    getTeacherInfo,
    addTeacherInfo,
    updateTeacherInfo,
    delTeacherInfo,
    exportTeacherInfo,
    importTemplate
  } from "@/api/teacher/infoNew";
  import TeacherForm from './components/TeacherForm';
  import Snapshot from "./snapshot.vue";

  export default {
    name: "TeacherInfo",
    components: { TeacherForm, Snapshot },
    dicts: ['teacher_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        show:false,
        // 总条数
        total: 0,
        // 师资信息表格数据
        teacherList: [],
        managerList:[],
        typeSelect:0,
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        type: 0,  // 0:列表界面 1:编辑界面
        currentTeacher: {}, // 当前编辑的教师信息
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 15,
          name: null,
          teacherType: null,
          status: null,
          teacherClassification: null,
          majorName: null,           // 添加专业名称参数
          professionalField: null
        },
        // 表单校验
        rules: {
          name: [
            { required: true, message: "师资姓名不能为空", trigger: "blur" },
            { min: 2, max: 50, message: '师资姓名长度必须介于 2 和 50 之间', trigger: 'blur' }
          ],
          teacherType: [
            { required: true, message: "师资类型不能为空", trigger: "change" }
          ],
          phone: [
            { required: true, message: "联系方式不能为空", trigger: "blur" },
            { pattern: /^1[3-9]\d{9}$/, message: "请输入正确的手机号码", trigger: "blur" }
          ]
        },
        // 导入参数
        upload: {
          open: false,
          title: "导入师资数据",
          isUploading: false,
          updateSupport: 0,
          url: process.env.VUE_APP_BASE_API + "/teacher/info/new/importData"
        },
        dialogVisible: false, // 快照对话框显示标志
        teacherId: null, // 当前教师ID
        // 添加师资类型列表
        teacherTypes: [
          { value: "internal", label: "内部" },
          { value: "external", label: "外部" }
        ],
      };
    },
    created() {
      this.getList();
      this.getDicts();
    },
    methods: {
      /** 查询师资列表 */
      getList() {
        this.loading = true;
        listTeacherInfo(this.queryParams).then(response => {
          this.teacherList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      handleTypeSelectTeachar(value) {
        if (this.queryParams.teacherClassification === value) {
          this.queryParams.teacherClassification = null; // 再次点击取消选择
        } else {
          this.queryParams.teacherClassification = value;
        }
        this.handleQuery(); // 触发搜索
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          name: null,
          teacherType: null,
          phone: null,
          professionalField: null,
          professionalTitle: null,
          majorName: null,
          signTime: null,
          expireTime: null,
          serviceCount: 0,
          status: "0",
          remark: null,
          uploadFile:null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      //查询荣誉资质所有类型
      getDicts() {
        getDicts('teacher_type').then(res => {
          this.managerList = res.data;
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.currentTeacher = {};
        this.currentTeacher.uploadFile=new Date().getTime();
        this.typeSelect=0;
        this.show=true;
        this.type = 1;
      },
      handleManagerSelect(manager) {
        if (this.queryParams.teacherType === manager.dictValue) {
          this.queryParams.teacherType = null; // 再次点击取消选择
        } else {
          this.queryParams.teacherType = manager.dictValue;
        }
        this.handleQuery(); // 触发搜索
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.currentTeacher = row;
        this.typeSelect=1;
        this.type = 1;
        this.show=true;
      },
      handleDetail(row) {
    this.currentTeacher = row;
    this.typeSelect = 2; // 用于标识详情模式
    this.type = 1;
    this.show = true;
  },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateTeacherInfo(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addTeacherInfo(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除所选师资信息？').then(() => {
          this.loading = true;
          return delTeacherInfo(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
          this.loading = false;
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('/teacher/info/new/export', {
          ...this.queryParams
        }, `师资信息_${new Date().getTime()}.xlsx`);
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('/teacher/info/new/importTemplate', {}, `师资信息模板_${new Date().getTime()}.xlsx`);
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      },
      // 序号处理方法
      indexMethod(index) {
        return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + index + 1;
      },
      // 快照按钮点击事件
      handleSnap(row) {
        this.dialogVisible = true;
        this.teacherId = row.id;
      },
      // 关闭快照对话框
      closeSnapShot() {
        this.dialogVisible = false;
      },
      // 处理师资类型选择
      handleTypeSelect(type) {
        if (this.queryParams.teacherType === type.value) {
          this.queryParams.teacherType = null; // 再次点击取消选择
        } else {
          this.queryParams.teacherType = type.value;
        }
        this.handleQuery(); // 触发搜索
      },
    }
  };
  </script>

  <style scoped lang="scss">
  //.teacher-index-container {
  //  overflow-y: auto;
  //  overflow-x: auto;
  //  padding: 16px;
  //  max-width: 100%;
  //  max-height: 90vh;
  //  box-sizing: border-box;
  //}

  .teacher-type-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .type-tag {
    padding: 4px 8px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.3s;
  }

  .type-tag:hover {
    color: #409eff;
    border-color: #409eff;
  }

  .type-tag.active {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
  }
  .manager-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    .manager-tag {
      padding: 0 12px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      transition: all 0.3s;

      &:hover {
        border-color: #409eff;
        color: #409eff;
      }

      &.active {
        background-color: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
  }
  </style>
